<div>
  <style>
    body {
      margin: 0px;
      color: blue;
    }
  </style>
        <canvas id="ad"></canvas>
    <script>

function scrollToBottom() {
  var selectBox = document.getElementById('code');
  selectBox.scrollTop = selectBox.scrollHeight;

  var selectBox_1 = document.getElementById('code_1');
  selectBox_1.scrollTop = selectBox_1.scrollHeight;
}

      var xhr = new XMLHttpRequest();
      xhr.open('GET' , './js/system.js' , true);
      xhr.send();
      xhr.onload = function() {
        var split = xhr.responseText.split('\n');
        var dom = document.getElementById('code');
        var i = 0;
        setInterval(function() {
          if (i + 1 == split.length) {
            i = 0;
          }
          else {
            dom.innerText += split[i] + '\n';
            scrollToBottom();
            i++;
          }
        } , 100)

        setTimeout(function() {
          setInterval(function() {
          if (i + 1 == split.length) {
            i = 0;
          }
          else {
            var dom_1 = document.getElementById('code_1');
            dom_1.innerText += split[i] + '\n';
            scrollToBottom();
            i++;
          }
        } , 200)
        } , 400)
      }

      var ad = document.getElementById("ad");
      var ctx = ad.getContext("2d");
      ad.height = window.innerHeight;
      ad.width = window.innerWidth;
      var chinese = "GREEF";   
      chinese = chinese.split("");
      var font_size = 10;  
      var columns = ad.width / font_size;
      var drops = [];
      for (var x = 0; x < columns; x++) drops[x] = 1;
      function draw() {
        ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; 
        ctx.fillRect(0, 0, ad.width, ad.height);
        ctx.fillStyle = "#00FF00";  
        ctx.font = font_size + "px arial";
        for (var i = 0; i < drops.length; i++) {
          var text = chinese[Math.floor(Math.random() * chinese.length)];  
          ctx.fillText(text, i * font_size, drops[i] * font_size);
          if (drops[i] * font_size > ad.height && Math.random() > 0.975)  
            drops[i] = 0;
          drops[i]++;
        }
      }
      setInterval(draw, 70); 
    </script>
    <style>
      .a::-webkit-scrollbar {
          display: none; /* 对于基于WebKit的浏览器 */
      }
      .a::-webkit-scrollbar {
          display: none; /* 对于基于WebKit的浏览器 */
      }
      
    </style>
     <div class="a" style="overflow-y: auto;color: #00FF00;font-weight: bold;width: 100%;bottom: 0;top: 0;position: absolute;opacity: 0.4;;background-image: url(./img/green-back.jpg);background-repeat: no-repeat;background-size: cover;">
      <div class="a" id="code" style="padding: 10px;overflow-y: auto;height: 100vh;width: calc(50% - 20px);float: left;"></div>
      <div class="a" id="code_1" style="padding: 10px;overflow-y: auto;height: 100vh;width: calc(50% - 20px);float: right;"></div>
    </div>
</div>
